<template>
 <div>
    <form action="">
        <!-- 搜索栏 -->
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      ></van-search>
    </form>

      <van-popup
        v-model="show"
        position="right"
        :style="{ height: '100%', width: '100%' }"
      >
      
      </van-popup>
   <!--    <van-row type="flex" justify="center">
            <van-col span="12" v-for="item in searchDB" :key="item.id">
                <img :src="item.list_pic_url" alt="" style="width:200px">
                <span>{{item.name}}</span>
                <span>价格：{{item.retail_price}}</span>
            </van-col>
        </van-row> -->
         <div class="first-news">
            <ul>
                <li  v-for="item in searchDB" :key="item.id">
                     <img v-lazy="item.list_pic_url" style="display: block;width:100%;" alt="">
                    <div class="title">{{item.name}}</div>
                    <div class="price">￥ {{item.retail_price}}.00 元</div>
                </li>
              
            </ul>
        </div>
       <!-- 历史记录热门搜索组件 -->
      <HistoryHot v-if="1 == 1" :historyKeywordList="historyKeywordList" :hotKeywordList="hotKeywordList" @tagClick="tagClick" />

      <!-- 搜索列表区块 -->
      <MyList v-else-if="2 == 2" :arr="listArr" @cellClick="tagClick" />

      <!-- 产品区块 -->
      <MyProduct v-else :filterCategory="filterCategory" :goodsList="goodsList" @categoryChange="categoryChange" @priceChange="priceChange" />
      
    
    <BackTop />
  </div>
</template>
<script>
import BackTop from "../../components/BackTop.vue";
import HistoryHot from './HistoryHot.vue'
import MyList from './MyList.vue'
import MyProduct from './MyProduct.vue'
import { Toast } from 'vant';
import {mapGetters} from 'vuex';
export default {
  name: "popup",
  props:['isShow'],
  data() {
    return {
      value: "",
      show:false,   
       historyKeywordList:['女式蝶边真丝内裤','单鞋','夏凉被','新品上市','母亲节'],
       hotKeywordList: [
        {
          keyword: "汽车",
          is_hot: 1,
        },
        {
          keyword: "球鞋",
          is_hot: 0,
        },
        {
          keyword: "墨镜",
          is_hot: 0,
        },
        {
          keyword: "秋裤",
          is_hot: 0,
        },
        {
          keyword: "棉衣",
          is_hot: 0,
        },
      ],
    };
  },
  components: {
    BackTop,HistoryHot,MyList,MyProduct
  },
  computed:{
      ...mapGetters(['searchDB']),
  },
  methods: {
     onSearch(val) {
         this.$store.dispatch('getSearchDB',val)  
      Toast(val);
    },
    onCancel() {
    this.isShow(false);
      Toast('取消');
    },
    historyKeywordList(){

    },
    hotKeywordList(){

    },
    tagClick(){
        
    },
    showPopup(){
         
    }

  },
};
</script>

<style scoped>
.first-news{
    margin-top:20px ;
     background: #fff;
}
.price{
        color: #8b0000;
         text-align: center;
}
.title{
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
     text-overflow: ellipsis;
} 
ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
}
ul>li{
    width: 49%;
    margin-bottom: 2px;
    position: relative;
}
</style>